<template>
  <div>
    <myDivider :name="scene == 'add' ? '新增' : scene == 'update' ? '编辑' : '详情'"></myDivider>
    <el-page-header @back="$router.go(-1)">
    </el-page-header>

    <!-- 表单 -->
    <el-form ref="ruleForm" class="fromStyle" :rules="rules" :model="formData" label-width="150px">
      <el-form-item label="系统：" prop="platform">
        <el-radio-group :disabled="scene == 'detail'" v-model="formData.platform">
          <el-radio label="0">android</el-radio>
          <el-radio label="1">ios</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="版本名称：" prop="versionName">
        <el-input :disabled="scene == 'detail'" v-model="formData.versionName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="版本号：" prop="versionCode">
        <el-input :disabled="scene == 'detail'" oninput="value=value.replace(/[^\d]/g,'')"
          v-model.number="formData.versionCode" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="更新内容：" prop="content">
        <el-input :disabled="scene == 'detail'" v-model="formData.content" type="textarea" :rows="5" maxlength="100"
          show-word-limit placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="更新类型：" prop="updateType">
        <el-radio-group :disabled="scene == 'detail'" v-model="formData.updateType">
          <el-radio label="0">非强制更新</el-radio>
          <el-radio label="1">强制更新</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="下载链接：" prop="downloadUrl" v-if="formData.platform != '1'">
        <el-input :disabled="scene == 'detail'" v-model="formData.downloadUrl" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="商店跳转链接：" prop="downloadUrl" v-if="formData.platform == '1'">
        <el-input :disabled="scene == 'detail'" v-model="formData.downloadUrl" placeholder="请输入"></el-input>
      </el-form-item>


    </el-form>

    <div class="btn" v-if="scene != 'detail'">
      <el-button style="width: 100px;" @click="cancel">取消</el-button>
      <el-button style="width: 100px;" type="primary" @click="okk">确认</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scene: '',
      formData: {},
      rules: {

        platform: [
          { required: true, message: '请选择更新的系统', trigger: 'change' }
        ],
        versionName: [
          { required: true, message: '请输入版本名称', trigger: 'blur' }
        ],
        versionCode: [
          { required: true, message: '请输入版本号', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入更新内容', trigger: 'blur' }
        ],
        updateType: [
          { required: true, message: '请选择更新类型', trigger: 'change' }
        ],
        downloadUrl: [
          { required: true, message: '请输入链接', trigger: 'blur' }
        ],
      },
    }
  },
  async activated() {
    this.scene = this.$route.query.scene
    switch (this.scene) {
      case 'add':
        this.$set(this.formData, 'platform', '')
        this.$set(this.formData, 'versionName', '')
        this.$set(this.formData, 'versionCode', '')
        this.$set(this.formData, 'content', '')
        this.$set(this.formData, 'updateType', '')
        this.$set(this.formData, 'downloadUrl', '')
        break
      case 'update':
      case 'detail':
        let res = await this.$api.axios.get('/business/appUpgrade/detail?id=' + this.$route.query.id)
        if (res) {
          this.$set(this.formData, 'id', res.data.id)
          this.$set(this.formData, 'platform', res.data.platform)
          this.$set(this.formData, 'versionName', res.data.versionName)
          this.$set(this.formData, 'versionCode', res.data.versionCode)
          this.$set(this.formData, 'content', res.data.content)
          this.$set(this.formData, 'updateType', res.data.updateType)
          this.$set(this.formData, 'downloadUrl', res.data.downloadUrl)
        }
        break
    }

    this.$nextTick(() => {
      this.$refs['ruleForm'].clearValidate()
    })
  },
  methods: {
    cancel() {
      if (this.scene == 'update') {
        this.$confirm('返回后不保存内容，确定返回吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$router.go(-1)
        }).catch(() => {

        });
      } else {
        this.$router.go(-1)
      }

    },
    okk() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.scene == 'add') {
            this.$confirm('是否新增?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(async () => {
              let res = await this.$api.axios.post('/business/appUpgrade/insert', {
                "platform": this.formData.platform,
                "versionName": this.formData.versionName,//版本名
                "versionCode": this.formData.versionCode,//版本号  必填
                "content": this.formData.content,//更新内容
                "updateType": this.formData.updateType,//更新类型 0 非强制更新 1 强制更新
                "downloadUrl": this.formData.downloadUrl//下载链接或商店跳转链接  必填
              })
              if (res) {
                this.$message({
                  type: 'success',
                  message: '新增成功!'
                });
                this.$router.go(-1)
              }
            }).catch(() => {

            });
          } else if (this.scene == 'update') {
            this.$confirm('是否修改?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(async () => {
              let res = await this.$api.axios.post('/business/appUpgrade/update', {
                id: this.formData.id,
                "platform": this.formData.platform,
                "versionName": this.formData.versionName,//版本名
                "versionCode": this.formData.versionCode,//版本号  必填
                "content": this.formData.content,//更新内容
                "updateType": this.formData.updateType,//更新类型 0 非强制更新 1 强制更新
                "downloadUrl": this.formData.downloadUrl//下载链接或商店跳转链接  必填
              })
              if (res) {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.$router.go(-1)
              }
            }).catch(() => {

            });
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.fromStyle {
  margin-top: 50px;
  width: 775px;
}



// 添加取消按钮
.btn {
  // margin-top: 50px;
  background-color: white;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px 1px #e1e1e1;
}
</style>